import React from 'react';

function TodoHelp() {
  return (
    <div className="todo-help">
      <h2>使用帮助</h2>
      <div className="help-section">
        <h3>基本操作</h3>
        <ul>
          <li><strong>添加待办事项</strong>：在输入框中输入内容，点击"添加"按钮或按回车键</li>
          <li><strong>标记完成/未完成</strong>：点击待办事项前的复选框</li>
          <li><strong>编辑待办事项</strong>：双击待办事项文本或点击编辑按钮</li>
          <li><strong>删除待办事项</strong>：点击待办事项右侧的删除按钮</li>
        </ul>
      </div>
      
      <div className="help-section">
        <h3>过滤功能</h3>
        <p>使用过滤按钮可以查看不同状态的待办事项：</p>
        <ul>
          <li><strong>全部</strong>：显示所有待办事项</li>
          <li><strong>未完成</strong>：只显示未完成的待办事项</li>
          <li><strong>已完成</strong>：只显示已完成的待办事项</li>
        </ul>
      </div>
      
      <div className="help-section">
        <h3>主题切换</h3>
        <p>点击右上角的主题切换按钮可以在明亮和暗黑主题之间切换。</p>
      </div>
      
      <div className="help-section">
        <h3>数据存储</h3>
        <p>所有待办事项都会自动保存在浏览器的本地存储中，刷新页面或关闭浏览器后重新打开，您的待办事项仍然会保留。</p>
      </div>
    </div>
  );
}

export default TodoHelp; 